This disclosure relates to a method and system of cropping an image.
Images can be generated in several ways. For example, an image can be captured using a film-based or digital camera and/or created and edited using image processing software such as ADOBE PHOTOSHOP(copyright) or the GNU IMAGE MANIPULATION PROGRAM (xe2x80x9cGIMPxe2x80x9d). Images captured using a film-based camera typically are stored as film negatives. Images captured using a digital camera typically are stored as digital files residing in the memory of the digital camera and/or a storage medium to which the file has been transferred (for example, a hard drive or CDROM). Images created using image processing software are typically stored as a digital file residing on a computer readable medium such as a hard drive.
An image-based product can be generated from such stored images. As used here, the term xe2x80x9cimage-based productxe2x80x9d refers to an item, regardless of medium, that includes a visual representation of at least a portion of one or more images. One example of an image-based product is an image print (also commonly referred to as a xe2x80x9cphotographxe2x80x9d). For example, a user can take a picture using a conventional film-based camera and then bring the exposed film to a photo-finishing laboratory to have the laboratory develop the exposed film and generate an image print.
In addition to a visual representation of at least a portion of one or more images, an image-based product can include other components. One conventional type of image-based product is created by mounting an image print in a frame. For example a user can physically take an image print to a frame shop (i.e., to a xe2x80x9cbrick-and-mortarxe2x80x9d frame shop) in order to select a frame (and other components such as a mat) in which to mount the image print. Such a user typically can seek assistance in selecting such components from an employee of the frame shop (referred to here as a xe2x80x9cframe shop assistantxe2x80x9d). The frame shop assistant can inspect the user""s image print and select a mat and frame the assistant believes will look good with the image print. The user can then physically place the image print in or near the selected mat and frame in order to get an idea of how the image print would look mounted with the selected mat and frame. In this way, a user who has little training and experience in selecting an appropriate mat and frame can have a trained and experienced frame shop assistant select a mat and frame for the image print.
When a customer wishes to have a high-quality image print generated from a digital image, the customer need not physically take the digital image to a photo-finishing laboratory and instead can electronically transmit the digital image to an xe2x80x9conlinexe2x80x9d photo-finishing laboratory using a computer network such as the Internet. For example, the customer can use an Internet browser program (referred to herein as a xe2x80x9cbrowserxe2x80x9d) such as NETSCAPE NAVIGATOR(copyright), which is commercially available from Netscape Communications Corporation of Mountain View, Calif., USA. The customer can direct the browser to a web site associated with the online photo-finishing laboratory and upload the digital image to a server hosting the web site. The online photo-finishing laboratory can then take the digital image from the web server and produce a high-quality image print from the digital image in a conventional manner. The online photo-finishing laboratory then typically sends the high-quality image print to the customer using a delivery service such as the UNITED STATES POSTAL SERVICE or FEDERAL EXPRESS(copyright).
Various implementations may include one or more of the following features.
In general, in one aspect, a method of cropping an image to be included in an image-based product can include displaying the image. The method also can include generating a crop mask based on cropping product attributes. The crop mask can have a selected portion corresponding to a selected portion of the image and a cropped portion corresponding to a cropped portion of the image. The method also can include displaying the crop mask over the image to visually indicate the selected portion of the image.
Advantageous implementations of the method include one or more of the following features. The method can further include receiving a crop command and changing the cropping product attributes based on the crop command. In such an implementation, the method can further include generating a new crop mask based on the changed cropping product attributes, and displaying the new crop mask over the image to visually indicate the selected portion of the image.
Optionally, the image can be displayed as the background in an hypertext markup language table cell (e.g., as an image formatted according to the JPEG standard), and the crop mask can be displayed as the foreground of the table cell. For example, the crop mask can be a GIF image. In such an implementation, the selected portion of the crop mask can be transparent so that the selected portion of the image is visible through the crop mask. For example, the crop mask can include a plurality of pixels where the pixels corresponding to the selected portion of the crop mask are transparent and the pixels corresponding to the cropped portion of the crop mask create a checkerboard pattern of transparent pixels and opaque pixels.
Displaying the image can include downloading the image to a client computer and displaying the image on the client computer. In such an implementation, displaying the crop mask over the image can include downloading the crop mask to the client computer and displaying the crop mask on the client computer.
Optionally, receiving the crop command can include receiving the crop command from the client computer. The client computer can transmit the crop command when a user actuates a control displayed on the client computer. The control can be, for example, a button that allows the user to change the shape of the selected portion of the image, a button that allows the user to zoom the selected portion of the image, or a button that allows the user to move the selected portion of the image.
In another aspect, a method can provide a user on a client computer an interface for cropping an image incorporated in an image-based product. The user can crop the image in order to identify selected and cropped portions of the image. The client computer can be in communication with a server and have a display and a pointing device operatively coupled to a cursor displayed on the display. Such a method can include receiving the image from the server, displaying the image, and receiving a crop mask generated by the sever based on a cropping product attribute of the image-based product. The crop mask can have a selected portion corresponding to the selected portion of the image and a cropped portion corresponding to the cropped portion of the image. The method can also include displaying the crop mask over the image to visually indicate the selected portion of the image and displaying a control that, when actuated, causes a crop command to be sent to the server.
Advantageous implementations of the method include one or more of the following features. The image can be displayed as the background in an hypertext markup language table cell (e.g., as an image formatted according to the JPEG standard), and the crop mask can be displayed as the foreground of the table cell (e.g., as a GIF image). The selected portion of the crop mask can be transparent so that the selected portion of the image is visible through the crop mask. For example, the crop mask can include a plurality of pixels where the pixels corresponding to the selected portion of the crop mask are transparent and the pixels corresponding to the cropped portion of the crop mask create a checkerboard pattern of transparent pixels and opaque pixels.
Optionally, the control can be a button that allows the user to change the shape of the selected portion of the image, a button that allows the user to zoom the selected portion of the image, or a button that allows the user to move the selected portion of the image.
In another aspect, a method of providing an interface for cropping an image can include generating a crop mask based on cropping product attributes. The crop mask can have a selected portion corresponding to a selected portion of the image and a cropped portion corresponding to a cropped portion of the image. The method can also include generating data, at least a portion of which is displayable by a client computer in order to provide an interface allowing the user of the client computer to crop the image. The method also can include providing the image, the crop mask, and the data to the client computer. The data can include instructions operable to cause the client computer to display the crop mask over the image to visually indicate the selected portion of the image.
Advantageous implementations of the method include one or more of the following features. The method can also include receiving a crop command from the client computer and changing the cropping product attributes based on the crop command. The data can include instructions operable to cause the client computer to display a crop control and transmit the crop command when the user actuates the crop control. The crop control can be a button that allows the user to change the shape of the selected portion of the image, a button that allows the user to zoom the selected portion of the image, or a button that allows the user to move the selected portion of the image. Optionally, the method can include generating a new crop mask based on the changed cropping product attributes and providing the new crop mask to the client computer. The client computer can display the new crop mask over the image to visually indicate the selected portion of the image.
The data can also includes instruction operable to cause the client computer to display the image as a background in an hypertext markup language table cell and display the crop mask as the foreground of the table cell. Also, the image can be formatted according to the JPEG standard, and the crop mask can be a GIF image.
The selected portion of the crop mask can be transparent so that the selected portion of the image is viewable through the crop mask. The crop mask can include a plurality of pixels where the pixels corresponding to the selected portion of the crop mask are transparent and the pixels corresponding to the cropped portion of the crop mask create a checkerboard pattern of transparent pixels and opaque pixels.
In another aspect, a server in communication with a client computer can include a web front end that communicates with the client computer. The server can also include server software tangibly embodied on a computer-readable medium. The software can include instructions operable to cause the server to generate a crop mask based on cropping product attributes. The crop mask can have a selected portion corresponding to a selected portion of the image and a cropped portion corresponding to a cropped portion of the image. The software can also include instructions operable to cause the server to generate data, at least a portion of which is displayable by a client computer in order to provide an interface. The interface can allow the user of the client computer to crop the image. The software can also include instructions operable to cause the server to provide the image, the crop mask, and the data to the client computer. The data can include instructions operable to cause the client computer to display the crop mask over the image to visually indicate the selected portion of the image.
Advantageous implementations of the method include one or more of the following features. The software can further include instruction operable to cause the server to receive a crop command from the client computer and change the cropping product attributes based on the crop command. In such an implementation, the data can include instructions operable to cause the client computer to display a crop control and transmit the crop command when the user actuates the crop control. The crop control can be a button that allows the user to change the shape of the selected portion of the image, a button that allows the user to zoom the selected portion of the image, or a button that allows the user to move the selected portion of the image. The software can also include instruction operable to cause the server to generate a new crop mask based on the changed cropping product attributes and provide the new crop mask to the client computer. The client computer can display the new crop mask over the image to visually indicate the selected portion of the image.
The data can includes instruction operable to cause the client computer to display the image as a background in an hypertext markup language table cell and display the crop mask as the foreground of the table cell. Also, the image can be formatted according to the JPEG standard and the crop mask can be a GIF image.
The selected portion of the crop mask can be transparent so that the selected portion of the image is viewable through the crop mask. Also, the crop mask can include a plurality of pixels where the pixels corresponding to the selected portion of the crop mask are transparent and the pixels corresponding to the cropped portion of the crop mask create a checkerboard pattern of transparent pixels and opaque pixels.
Advantages that can be seen in implementations of the invention include one or more of the following. Generating and displaying a preview image of an image-based product allows a user to see how the image-based product will look with a particular set of product attributes. In this way, the user can determine if the user wishes to order such an image-based product and/or modify one or more of the attributes of that image-based product. For example, a preview image of an image print can be generated from an image selected by the user. The user can change one or more attributes of the image print, for example, the minimum border width, border style, border color, and print size.
Changing one or more attributes of an image-based product involves selecting which product attributes to change and then assigning a value to the selected attributes. Both of these operations can be performed manually by a user or automatically by a system. For example, a system can be configured to automatically select the one or more product attributes to change at random. In addition, or instead, the system can be configured to select one or more of the product attributes to change based on information relating to the user""s images, past transactions, and account information. For example, the system can select one or more product attributes that the user""s account information indicates the user has not tried changing (perhaps, because the user was unaware that the particular attribute could be changed). Also, the system can be configured to assign new values to the selected product attributes at random and/or based on information relating to the user""s images, past transactions, and account information. In this way, the system can be configured to suggest new ways to incorporate a user""s image in an image-based product.
For example, a system can be configured so as to allow the user to select one or more attributes to change and then have the system automatically assign values to the selected product attributes. The system can be configured to automatically assign the values to the selected product attributes as a function of a selected image. In one implementation, the system automatically selects a border color for an image print based on the colors contained in an image. In another implementation, the system can be configured to select multiple images to be included in an image-based product. In such an implementation, the product attribute assigned a new value is an attribute that indicates which images are to be included in the image-based product.
Moreover, the system can be configured to allow the user to both select which product attributes to change and assign a new value to the selected product attributes. For example, the system can be configured to present the user with an interface for cropping a selected image. In such an interface, a crop mask is displayed over the selected image. The system can generate the crop mask as a GIF image in which the portion of the crop mask corresponding to a selected portion of the image is transparent and the portion of the crop mask corresponding to a cropped portion of the image has a checkerboard pattern. By displaying the crop mask over the image, the selected portion of the image can be visually indicated. When a user changes the current selected portion of the image (for example, by actuating a control displayed on the client computer), the system generates a new crop mask based on the changes made by the user and displays the new crop mask over the image in order to visually indicate the new selected portion of the image.
Such an implementation is well suited for use with a browser-based system such as the World Wide Web. For example, the image and the crop mask can be displayed in an HTML table cell embedded in a web page. Because the system need only generate and download to the browser a new crop mask each time a user makes a change (as opposed to generating and downloading an entire image file), the system can display the changes made by the user relatively quickly.
In another implementation, the user can change product attributes relating to the border size, border style, border color, and/or print size of an image print. In yet another implementation, the user can specify the content and position of text to be incorporated in an image-based product.
Furthermore, a user interface control can be provided that the user can actuate in order to cause the system to automatically change one or more attributes of the image-based product. The system can be configured to change the attributes of the image-based product in a different way each time the control is actuated. Also, the appearance of the control can be changed each time the control is actuated in order to indicate to the user that actuating the control another time will cause the system to make different changes to the image-based product.
Moreover, state information can be automatically stored for each image, without requiring the user to issue an explicit xe2x80x9csavexe2x80x9d command. The state information can include information about the current product attributes associated with each image. For example, the stored state information can be updated each time the user changes the product attributes associated with an image. When the user later accesses that image (e.g., after the user performs some operation with another image and/or disconnects from the system), the stored state information can be retrieved and used as the current product attributes for the image. As a result, a preview image based on the retrieved state information can be generated and displayed for the user, and the user can resume manipulating the product attributes associated with the image starting from the point where the user was when the user last accessed the image.
The stored state information can also include information about past states of the product attributes associated with the image. The information about past states can include modification history that can be used to xe2x80x9cundoxe2x80x9d changes the user has previously made to the product attributes. Also, this modification history information can be used to allow the user to xe2x80x9credoxe2x80x9d any changes that have been undone. For example, the user can make changes to product attributes associated with a first image. Then, the user can cease accessing that image and perform some other operationxe2x80x94for example, accessing and changing product attributes associated with a second image and/or disconnecting from the system. When the user subsequently accesses the image (e.g., several days later), the modification history information for that image can be retrieved and used to allow the user to undo or redo changes made while the user last accessed that image.